<template>
	<div class="parent">
		<div v-for="(tag, index) in tags" :key="index" class="tag">
			{{ tag }}
			<span @click="removeTag(index)">X</span>
		</div>
		<input type="text" v-model="newTag" placeholder="输入话题">
		<button type="primary" size="mini" @click="addTag"># 话题</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tags: [],
				newTag: '',
				newMention: ''
			}
		},
		methods: {
			addTag() {
				if (this.newTag.trim() !== '') {
					this.tags.push(this.newTag.trim())
					this.$emit("handle-subject",this.newTag.trim())
					this.newTag = ''
				}
			},
			removeTag(index) {
				this.tags.splice(index, 1)
			},
			addMention() {
				if (this.newMention.trim() !== '') {
					this.$emit('mention', this.newMention.trim())
					this.newMention = ''
				}
			}
		}
	}
</script>

<style scoped>
	.parent {
		
	}

	.tag {
		background-color: #ddd;
		border-radius: 5px;
		padding: 5px;
		margin-right: 5px;
		display: inline-block;
	}

	.tag span {
		margin-left: 5px;
		cursor: pointer;
	}
	
	input{
		text-align: center;
		margin-bottom: 5px;
	}

	button {
		margin-left: 40%;
	}
</style>